<template>
    <div id="container">
      <div class="header">
      </div>

      <div id="wrapper" ref="scrollWrap">
        <div class="scroller" ref="scroller" >
          <!-- 红色线路 -->
          <div v-if="touristList.length >0" class="weui-cells__title">红色线路</div>
          <div v-for ="item in touristList" v-if="touristList.length >0" class="weui-panel weui-panel_access">
            <!-- body 部分 -->
            <router-link class="mint-cell" :key="item.id" :to="{name: 'touristDetail', params:{touristId:item.id}}" >
            <div class="weui-panel__bd">
            <!-- 一个列表条目 -->
              <a href="#" class="weui-media-box weui-media-box_appmsg">
                <div class="panel-media-box__hd">
                <img :src="item.displayImgUrl" alt="" class="weui-media-box__thumb">
                </div>
                <div class="weui-media-box__bd">
                  <h4 class="weui-media-box__title">{{item.projectName}}</h4>
                  <p class="weui-media-box__info">{{item.projectStartTime}}至{{item.projectEndTime}}</p>
                  <p class="weui-media-box__desc">{{item.projectDesc}}</p>
                  <!-- p v-if="item.bookedNumber" class="weui-media-box__info__meta">已有{{item.bookedNumber}}人预约</p-->
                  <!-- p v-else="item.bookedNumber" class="weui-media-box__info__meta">目前没有人预约</p-->
                </div>
              </a>
            </div>
            </router-link>
          </div>
          <!-- 场馆 -->
          <div v-if="roomList.length >0" class="weui-cells__title">场馆</div>
          <div v-for ="item in roomList" v-if="roomList.length >0" class="weui-panel weui-panel_access">
            <!-- body 部分 -->
            <router-link class="mint-cell" :key="item.id" :to="{name: 'touristRoomDetail', params:{touristId:item.id}}" >
            <div class="weui-panel__bd">
            <!-- 一个列表条目 -->
              <a href="#" class="weui-media-box weui-media-box_appmsg">
                <div class="panel-media-box__hd">
                <img :src="item.displayImgUrl" alt="" class="weui-media-box__thumb">
                </div>
                <div class="weui-media-box__bd">
                  <h4 class="weui-media-box__title">{{item.projectName}}</h4>
                  <p class="weui-media-box__info">{{item.projectStartTime}}至{{item.projectEndTime}}</p>
                  <p class="weui-media-box__desc">{{item.projectDesc}}</p>
                  <!-- p v-if="item.bookedNumber" class="weui-media-box__info__meta">已有{{item.bookedNumber}}人预约</p -->
                  <!-- p v-else="item.bookedNumber" class="weui-media-box__info__meta">目前没有人预约</p -->
                </div>
              </a>
            </div>
            </router-link>
          </div>
        </div>
      </div>

      <div>

      </div>
    </div>
</template>
<script>
  import fetch from '../utils/fetch'
export default {
    name: 'home',
    data() {
      return {
        pageReq:{
          count:'',
          page:''
        },
        touristList:[],
        roomList:[]
      }
    },
    components:{
    },
    created(){
      this.handleGetProjects();
      this.handleGetProjectsForRoom();
    },
    methods:{
      handleGetProjects(){
        this.pageReq.count = 999;
        this.pageReq.page = 0;
        this.pageReq.type = 0;
        let formData = JSON.stringify(this.pageReq)

        fetch.post('/api/project/list',formData).then(response =>{
          if(response.data.success){
            this.touristList = response.data.response
          }
        });
      },
      handleGetProjectsForRoom(){
        this.pageReq.count = 999;
        this.pageReq.page = 0;
        this.pageReq.type = 1;
        let formData = JSON.stringify(this.pageReq)
        //get project
        fetch.post('/api/project/list',formData).then(response =>{
          if(response.data.success){
            this.roomList = response.data.response
          }
        });
      }
    }


  }
</script>

<style lang="scss" scoped>
  @import '../../static/css/weui.css';
  @import '../base/css/_base';
  #container{
    padding-bottom: 1.111rem;
    .header{
      height: 5.0rem;
      background: url() no-repeat center/cover;
      @include dpr-img('../assets/', 'swiper5');
      text-align: center;
      .title {
        color: #fff;
        font-weight: 700;
        @include fz(10px);
        font-family: SimHei;
        background: #000;
        opacity: 0.8;
        padding: 10px 0;
      }
    }
  }
 .weui-cells__title {
    margin-top: 0;
    margin-bottom: 0;
    padding: 8px;
    color: #fff;
    background-color: #f15f5c;
    text-align: center;
    font-size: 18px;

}
.weui-panel{
    margin-top: 0;
}
.weui-media-box{
    padding: 10px 15px 10px 10px;
}
  .panel-media-box__hd {
    padding-right: 10px;
    width: 180px;
    height: 110px;
    line-height: 140px;
    text-align: center
  }
.weui-media-box__title{
    font-weight: bold !important;
    font-size: 18px !important;
    color:#101010;
    letter-spacing: 2px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    box-sizing: border-box;
    white-space: pre-wrap;
}
.weui-media-box__info{
  margin-top:0;
  padding: 8px 0;
  color: #101010;
}
.weui-media-box__info__meta{
    display: inline-block;
    border: 1px solid #F15F5C;
    color: #F15F5C;
    float: right;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: #feefee;
    font-size: 13px;
    line-height: 1em;
}
.weui-media-box__desc{
    font-size: 12px;
    color: #9C9C9C;
}
.weui-media-box__title,.weui-media-box__desc{
    margin: 8px 0;
}
</style>
